<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>shit Fuck ZT</title>
    <!--引入表格样式-->
	 <link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.15.13/theme-chalk/index.css">
	 <style>
	  .el-table .warning-row {
		background: oldlace;
	  }

	  .el-table .success-row {
		background: #f0f9eb;
	  }	 
     .el-table tbody .el-table__row:nth-child(odd) {
		background: #ccefff!important;
	 }
	 .el-table .el-table__row:nth-child(2n) {
		background: #ffc!important;
	 }
	 </style>
</head>
<body>
<div id="app">
	<div>
		<p style="margin: 20px 50;">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="今日涨停" name="first">
					<el-table :data="tbzt" v-loading="tbztLoading" :height="tbztHeight" style="width:100%">
						<el-table-column  prop="code" label="代码" align="center" width="80"></el-table-column>
						<el-table-column  prop="name" label="名称" align="center" width="80"></el-table-column>
						<el-table-column prop="zhangfu" label="涨幅" align="center" width="80"></el-table-column>
						<el-table-column prop="price" label="现价" align="center" width="80"></el-table-column>
						<el-table-column prop="lian_ban_ci_shu" label="连扳次数" align="center" width="80"></el-table-column>
						<el-table-column prop="ji_tian_ji_ban" label="几天几板" align="center" width="100"></el-table-column>
						<el-table-column prop="shou_feng_shi_jian" label="首封时间" align="center" width="80"></el-table-column>
						<el-table-column prop="zuihou_feng_ban" label="最后时间" align="center" width="80"></el-table-column>
						<el-table-column prop="zha_ban_shi_jian" label="炸板时间" align="center" width="80"></el-table-column>
						<el-table-column prop="kai_ban_ci_shu" label="开次数" align="center" width="80"></el-table-column>
						<el-table-column prop="feng_dan_e" label="封单" align="center" width="100"></el-table-column>
						<el-table-column prop="cheng_jiao_e" label="成交额" align="center" width="100"></el-table-column>
						<el-table-column prop="liu_tong_zhi" label="流通市值" align="center" width="100"></el-table-column>
						<el-table-column prop="gai_nian_xi_fen" label="概念细分" align="center" width="200"></el-table-column>
						<el-table-column prop="zhang_ting_yuan_yin" label="涨停原因" align="center">
							<template slot-scope="scope">
								<div v-html="scope.row.zhang_ting_yuan_yin"></div>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="今日炸板" name="second">
					<el-table :data="tbzb" v-loading="tbzbLoading" :height="tbzbHeight" style="width:100%">
						<el-table-column  prop="code" label="代码" align="center" width="80"></el-table-column>
						<el-table-column  prop="name" label="名称" align="center" width="80"></el-table-column>
						<el-table-column prop="zhangfu" label="涨幅" align="center" width="80"></el-table-column>
						<el-table-column prop="price" label="现价" align="center" width="80"></el-table-column>
						<el-table-column prop="lian_ban_ci_shu" label="连扳次数" align="center" width="80"></el-table-column>
						<el-table-column prop="ji_tian_ji_ban" label="几天几板" align="center" width="100"></el-table-column>
						<el-table-column prop="shou_feng_shi_jian" label="首封时间" align="center" width="80"></el-table-column>
						<el-table-column prop="zuihou_feng_ban" label="最后时间" align="center" width="80"></el-table-column>
						<el-table-column prop="zha_ban_shi_jian" label="炸板时间" align="center" width="80"></el-table-column>
						<el-table-column prop="kai_ban_ci_shu" label="开次数" align="center" width="80"></el-table-column>
						<el-table-column prop="feng_dan_e" label="封单" align="center" width="100"></el-table-column>
						<el-table-column prop="cheng_jiao_e" label="成交额" align="center" width="100"></el-table-column>
						<el-table-column prop="liu_tong_zhi" label="流通市值" align="center" width="100"></el-table-column>
						<el-table-column prop="gai_nian_xi_fen" label="概念细分" align="center" width="200"></el-table-column>
						<el-table-column prop="zhang_ting_yuan_yin" label="涨停原因" align="center">
							<template slot-scope="scope">
								<div v-html="scope.row.zhang_ting_yuan_yin"></div>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>		
		</p>
	</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- import JavaScript -->
<script src="https://lib.baomitu.com/element-ui/2.15.13/index.js"></script>
<script>
	function parseTime(time, cFormat) {
	  if (arguments.length === 0) {
		return null
	  }
	  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
	  let date
	  if (typeof time === 'object') {
		date = time
	  } else {
		if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
		  time = parseInt(time)
		}
		if ((typeof time === 'number') && (time.toString().length === 10)) {
		  time = time * 1000
		}
		date = new Date(time)
	  }
	  const formatObj = {
		y: date.getFullYear(),
		m: date.getMonth() + 1,
		d: date.getDate(),
		h: date.getHours(),
		i: date.getMinutes(),
		s: date.getSeconds(),
		a: date.getDay()
	  }
	  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
		let value = formatObj[key]
		// Note: getDay() returns 0 on Sunday
		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
		if (result.length > 0 && value < 10) {
		  value = '0' + value
		}
		return value || 0
	  })
	  return time_str
	}
    var app = new Vue({
        el: '#app',
        data: function () {			
            return {
				activeName:'first',
				tbztLoading:false,
				tbzt: [],
				tbztHeight:0,
				tbzbLoading:false,
				tbzb:[],
				tbzbHeight:0,
            }
        },
		created(){
			this.loadZTData();
		},
		methods:{
			handleClick(){
				if(this.activeName=='first' && this.tbzt.length<1){
					this.loadZTData();
					return;
				}
				if(this.activeName=='second' && this.tbzb.length<1){
					this.loadZBData();
					return;
				}
			},
			analyData(res){
				let ret = [];
				
				if(res.data && res.data.length>0){
					res.data.forEach(xx=>{
						let code = (xx.symbol||'').match(/\d{6}/gi);
						let huan_shou = (xx.turnover_ratio || 0);
						let liu_tong_zhi = (xx.non_restricted_capital || 0);
						let feng_dan_bi = (xx.buy_lock_volume_ratio ||0);
						let cheng_jiao_e = huan_shou*liu_tong_zhi;
						let feng_dan_e = cheng_jiao_e*feng_dan_bi;
						
						let gnxf = [];
						let ztyy = '';
						if(xx.surge_reason && xx.surge_reason.related_plates && xx.surge_reason.related_plates.length>0){
							xx.surge_reason.related_plates.forEach(cc=>{
								if(ztyy.length>0){
									ztyy+='<br/>';
								}
								if(cc.plate_name){
									gnxf.push(cc.plate_name);
									ztyy += cc.plate_name +':'+(cc.plate_reason || '');
								}
							});								
						}
						
						let dditem = {
							code,
							name:(xx.stock_chi_name||''),
							zhangfu:(((xx.change_percent||0)*100).toFixed(2)+'%'),
							price:(xx.price || 0),
							lian_ban_ci_shu:(xx.limit_up_days?(xx.limit_up_days==1?'首板':(xx.limit_up_days+'板')):0),
							ji_tian_ji_ban:((xx.m_days_n_boards_days&&xx.m_days_n_boards_boards)?(xx.m_days_n_boards_days+'天'+xx.m_days_n_boards_boards+'板'):''),
							shou_feng_shi_jian:(xx.first_limit_up?parseTime(xx.first_limit_up,'{h}:{i}:{s}'):''),
							zuihou_feng_ban:(xx.last_limit_up?parseTime(xx.last_limit_up,'{h}:{i}:{s}'):''),
							zha_ban_shi_jian:(xx.last_break_limit_up?parseTime(xx.last_break_limit_up,'{h}:{i}:{s}'):''),
							kai_ban_ci_shu:(xx.break_limit_up_times||0),
							feng_dan_e:(feng_dan_e>100000000?((feng_dan_e/100000000).toFixed(2)+'亿'):((feng_dan_e/10000).toFixed(0)+'万')),
							cheng_jiao_e:(cheng_jiao_e>100000000?((cheng_jiao_e/100000000).toFixed(2)+'亿'):((cheng_jiao_e/10000).toFixed(0)+'万')),
							liu_tong_zhi:(liu_tong_zhi>100000000?((liu_tong_zhi/100000000).toFixed(2)+'亿'):((liu_tong_zhi/10000).toFixed(0)+'万')),
							gai_nian_xi_fen:gnxf.join(','),
							zhang_ting_yuan_yin:ztyy,
						};	
						ret.push(dditem);		
					});
					
				}
				
				return ret;
			},
			loadZTData(){
				let _this = this;
				_this.tbztLoading = true;
				try{
					_this.tbzt = [];
					var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
					xhr.open('GET', 'https://flash-api.xuangubao.cn/api/pool/limit_up', true);
					xhr.responseType = 'application/json';
					xhr.onload = function (e) { //下载完成
						_this.tbztLoading = false;
						if(!this.response || this.response.length<10){
							return;
						}
						let res = JSON.parse(this.response || '');
						if((res.code && res.code!=20000) || (res.message && res.message != 'OK')){
							_this.$message.error('holly shit request zt failed!');	
							return;
						}	
						_this.tbzt = _this.analyData(res);
						if(_this.tbzt.length>0){
							let winHeight = window.outerHeight*0.8;
							let rowHeight = 48*_this.tbzt.length;
							_this.tbztHeight = rowHeight>winHeight?winHeight:rowHeight;
						}
					};
					xhr.send();				
				}catch(err){
					console.log(err);
					_this.tbztLoading = false;
				}
			},
			loadZBData(){
				let _this = this;
				_this.tbzbLoading = true;
				try{
					_this.tbzb = [];
					var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
					xhr.open('GET', 'https://flash-api.xuangubao.cn/api/pool/limit_up_broken', true);
					xhr.responseType = 'application/json';
					xhr.onload = function (e) { //下载完成
						_this.tbzbLoading = false;
						if(!this.response || this.response.length<10){
							return;
						}
						let res = JSON.parse(this.response || '');
						if((res.code && res.code!=20000) || (res.message && res.message != 'OK')){
							_this.$message.error('holly shit request zb failed!');	
							return;
						}	
						_this.tbzb = _this.analyData(res);
						if(_this.tbzb.length>0){
							let winHeight = window.outerHeight*0.8;
							let rowHeight = 48*_this.tbzb.length;
							_this.tbzbHeight = rowHeight>winHeight?winHeight:rowHeight;
						}
					};
					xhr.send();				
				}catch(err){
					console.log(err);
					_this.tbzbLoading = false;
				}
			}
		}
    })
</script>
</html>
